<template>
    <div class="todo-list-item" ref="item" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <div ref="delete" class="delete-item">
        <div class="x" @click="handleClick">
        <div class='first-x'></div>
        <div class='second-x'></div>
        </div>
    </div>
      <div class="item-content" ref="content">{{content}}</div>
    </div>
</template>

<script>
import anime from "animejs/lib/anime.es";
import bus from "@/bus"
export default {
  name: "TodoListItem",
  props: ["content","index"],
  methods: {
    handleMouseEnter() {
        const target = this.$refs.delete;
        const target2 = this.$refs.content;
        const width = this.$refs.item.getBoundingClientRect().width-22;
        const anim = anime.timeline({
            duration:'500ms',
            easing:'easeInOutSine'
        })
        anim.add({
            targets:target,
            right:'-30px',
            
        },0).add({
            targets:target2,
            width:`${width-50}px`,
        },0)
    },
    handleMouseLeave() {
        const target = this.$refs.delete;
        const target2 = this.$refs.content;
        const width = this.$refs.item.getBoundingClientRect().width-22
        const anim = anime.timeline({
            duration:'500ms',
            easing:'easeInOutSine'
        })
        anim.add({
            targets:target,
            right:'-80px',
            
        },0).add({

            targets:target2,
            width:`${width}px`,
        },0)
    },
    handleClick(){
        bus.$emit('delete',this.index);
    }
  },
  mounted(){
      this.__fresh=()=>{
        const target = this.$refs.delete;
        const target2 = this.$refs.content;
        const width = this.$refs.item.getBoundingClientRect().width-22
        anime({
            targets:target,
            right:'-80px',
            duration:'0',
            easing:'linear'
        })
        anime({
            targets:target2,
            width:`${width}px`,
            duration:'0',
            easing:'linear'
        })
      }
      window.addEventListener('resize',this.__fresh)
  },
  beforeDestroy(){
      window.addEventListener('resize',this.__fresh)
      delete this.__fresh

  }
};
</script>

<style>
.todo-list-item {
  position: relative;
  border: solid 1px black;
  margin: 0 30px;
  padding: 10px;
  text-align: left;
  overflow: hidden;
}
.item-content {
  word-break: break-all;
  font-size: 1.5em;

}
.delete-item {
  float: right;
  position: absolute;
  top: 0;
  right: -80px;
  bottom: 0;
  width: 80px;
}
.outer {
  position: relative;
  overflow: hidden;
}
.x{
    position: absolute;
    top: 50%;
    width:50px;
    height: 50px;
    transform:translateY(-50%);
    cursor:pointer;
    background-color: red;
}
.first-x{
    position: absolute;
    top: 50%;
    width: 50px;
    transform:rotate(45deg);
    border-top: 3px solid white;
}
.second-x{
    position: absolute;
    width: 50px;
    top: 50%;
    right: 0px;
    transform:rotate(-45deg);
    border-top: 3px solid white;
}
</style>